<template>
    <div class='card-container' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix'>
                <div class='lf personInfo'>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate.split(' ')[0]}}({{personInfo.birthdate | calculateAge}}岁)</li> 
                        <li class="ellipsis" :title="personInfo.c_leader_ident"><i class="iconfont" ></i>国&nbsp&nbsp籍 : {{personInfo.c_leader_ident}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" v-if="hideLeader1" target="_blank" :href="ComputedEmplid">
                    <i class="fa fa-file-pdf-o"></i> 干部任免审批表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" v-if="hidePay1" data-replace-inner="#modal1" data-spin="true" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>
            <el-dialog :title="title" size="small" :visible.sync="dialogTableVisible" :lock-scroll=false>
                <div>
                    <h3>薪酬组成</h3>
                    <el-table :data="gridData">
                        <el-table-column property="date" label="薪酬项" width="150"></el-table-column>
                        <el-table-column property="name" label="金额" width="200"></el-table-column>
                        <el-table-column property="address" label="货币"></el-table-column>
                        <el-table-column property="address" label="发薪频率"></el-table-column>
                    </el-table>
                </div>
                <div class="salaryRecord">
                    <h3>近半年发薪记录</h3>
                    <el-table :data="gridData1" fit='true'>
                        <el-table-column property="date" label="发薪期间" width="80"></el-table-column>
                        <el-table-column property="name" label="发薪类型" width="80"></el-table-column>
                        <el-table-column property="address" label="收入合计	" width="80"></el-table-column>
                        <el-table-column property="address" label="扣减合计" width="80"></el-table-column>
                        <el-table-column property="address" label="实发工资"></el-table-column>
                        <el-table-column property="address" label="公司承担社保/MPF"></el-table-column>
                        <el-table-column property="address" label="人工成本合计"></el-table-column>
                        <el-table-column property="address" label="货币代码"></el-table-column> 
                    </el-table>
                </div>

            </el-dialog>
        </div>
        
    </div>
</template>
<script>
import Vue from 'vue'
import { Table, TableColumn, Dialog } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Dialog)
export default {
	data () {
		return {
			// wid:'33.333%'
			red: 'me',
			dialogTableVisible: false,
			gridData: [{
				date: '基本工资（香港）',
				name: '10000',
				address: 'HKD',
				often: '每月'
			}],
			gridData1: [],
			title: '魏平勇-薪酬信息'

		}
	},
	components: {

	},
	methods: {
		salaryDetail: function () {
			this.dialogTableVisible = true
		}
	},
	computed: {
		srcImg: function () {
			var ImgObj = new Image() //判断图片是否存在  
			ImgObj.src = 'http://10.5.0.137:8080/img/' + this.personInfo.emplid + '.png'
			//没有图片，则返回-1  
			if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
				return 'http://10.5.0.137:8080/img/' + this.personInfo.emplid + '.png'
			} else {
				return '/static/images/default1.jpg'
			}

		},
		ComputedEmplid: function () {
			return 'module/leaderAppoint.html?emplid=' + this.personInfo.emplid
		},
		hideLeader1: function () {
			return this.hideLeader ? true : false
		},
		hidePay1: function () {
			return this.hidePay ? true : false
		}
	},
	filters: {
		calculateAge: function (value) {

			return new Date().getFullYear() - new Date(value).getFullYear()
		}
	},
	props: {
		width: {
			type: String,
			default: '33.333%'
		},
		personInfo: {
			type: Object,
			default: ''
		},
		hideLeader: {
			type: Number,
			default: 0
		},
		hidePay: {
			type: Number,
			default: 0
		}
	},
	watch: {
		widt: function () {
			console.log('watch', this.widt)
			console.log(this.red, 'tell me color')
		}
	}
}
</script>
<style scoped>
.card-container {
  position: relative;
  min-height: 1px;
  float: left;
  color: #333;
  background-color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}
.card-inner {
  width: 100%;
  margin: 10px auto;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/*个人信息区域样式 start*/
.card-container .personTotal {
  cursor: pointer;
  margin-bottom: 20px;
}
.card-container .personInfo {
  float: left;
  width: 69%;
  padding-left: 4%;
}
.iconfont {
  width: 20px;
  display: inline-block;
}
.card-container .name {
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
}
.card-container .width-nochange {
  /*max-width: 237px;*/
  min-width: 223px;
}

.card-container li {
  line-height: 25px;
  color: #333;
}
.card-container li .fa {
  width: 20px;
}
.card-container .personImg {
  float: left;
  width: 31%;
  padding-left: 5px;
  padding-top: 25px;
}
.card-container .cardPhoto {
  /*margin-left:5px;*/
  width: 100px;
  height: 139px;
  border-radius: 50%;
  max-width: 100%;
  vertical-align: middle;
}
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
.card-container .btnArea {
  background: #f2f5f7;
  padding: 12px 0;
  border-top: 1px solid #e6e9ed;
  text-align: center;
  height: 44px;
}
.card-container .btn {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
}
.card-container .btnArea .btn-leaderInfo {
  color: #fff;
  background-color: #3c8dbc;
  border-color: #204d74;
}
.card-container .btnArea .btn-leaderInfo:hover {
  background-color: #367fa9;
}
.card-container .btnArea .btn-leaderSalary {
  color: #fff;
  margin-left: 8px;
  background-color: #00c0ef;
  border-color: #00acd6;
}
.card-container .btnArea .btn-leaderSalary:hover {
  background-color: #00acd6;
}
/*按钮区域样式 end*/
</style>
<style>
.card-container .el-dialog--small {
  width: 66%;
}
.card-container .el-table .gutter {
  display: none;
}
.card-container .salaryRecord {
  margin-top: 20px;
}
</style>



